import React,{Fragment} from 'react';
import {Table,Button,Tooltip } from 'antd';

import {SettingOutlined} from '@ant-design/icons';
import VModal from '../VModal';


const setStyle ={
    // 'position': 'absolute',
    // 'top': '0px',
    // 'right': '44px'
}

class VTable extends React.Component{

    constructor(props){
        super(props);
        console.log('props:'+props.id);
        this.state={
            columns:props.columns?props.columns:[],
            dataSource:props.dataSource?props.dataSource:[]
        }
    }

    openModal(id){
        console.log(id);
    }

    changeColumns(value,data){
        console.log('father:',value,data);
        const newValue=value.map((item,index)=>{
            const col ={
                title: item,
                dataIndex: item,
                key: index,
              }
            return col;
        });

        const newData=data.map((item,index)=>{
             item['key']=index;
             return item;
        })
        console.log('newValues:',newValue,newData);
        this.setState({
            columns:newValue,
            dataSource:newData
        })
    }


    render(){

        // const dataSource= this.props.dataSource?this.props.dataSource:[];
        // const columns= this.props.columns?this.props.columns:[];
        const {id} = this.props;
        return (
                <Fragment>
                    <div style={setStyle}>
                        <VModal  changeColumns={this.changeColumns.bind(this)}/>
                    </div>

                    <Table dataSource={this.state.dataSource} bordered={true} columns={this.state.columns} />

                    
                </Fragment>
        )
    }
}

export default VTable;